<template>
	<view class="flex-column container">
		<custom-navigation title="商品信息" rightImg="/static/add.png" @rightAction="itemClick(null)">
		</custom-navigation>



		<view class="flex-row-center"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center">
				<image src="/static/search.png"></image>
				<input placeholder="商品名称/条形码/助记码" placeholder-style="color:#999999" v-model="searchStr"
					@confirm="doSearch" confirm-type="search" type="text" @focus="is_search=true" @blur="is_search=false" @keydown.enter="is_search=false;doSearch()" />
			</view>
			<picker :value="goodsTypeIndex" :range="goodsTypes" @change="filterGoodsType">
				<view class="fliter-box" @click="showPicker=true">
					<image src="/static/filter.png"></image>
					<text>筛选</text>
				</view>
			</picker>
		</view> 

		<view class="body flex-row">
			<scroll-view class="left-container" scroll-y="true">
				<view v-for="item in classifycations" :key="item.id">

					<view :class="classSelectData.no==item.no?'check-item':'uncheck-item'"
						@click="selectClassify(item)">
						<view>{{item.classify_name}}</view>
						<image :src="item.expand?'/static/arrow-bottom.png':'/static/arrow_black.png'"
							v-if="item.children.length>0"></image>
					</view>
					<view v-if="item.expand">
						<view :class="classSelectData.no==item.no?'check-item-child':'uncheck-item-child'"
							@click="selectClassify(item)" v-for="item in item.children">
							<view>{{item.classify_name}}</view>
						</view>
					</view>

				</view>
			</scroll-view>
			<scroll-view class="right-container"  scroll-y="true">
				<view class="flex-row-center">
					<view class="title">{{classSelectData.classify_name}}</view>
					<view class="checkAll" v-if="multiSelect" @click="checkAllClick">{{!isCheckAll()?'本组全选':'取消本组全选'}}
					</view>
				</view>
				<view class="item flex-row-center" v-for="item in goods" :key="item.id" @click="itemClick(item)" v-if="!(([1,2].includes(menuType) && item.is_temporary_goods=='是' && !multiSelect) || ([0,1,2].includes(menuType) && item.is_temporary_goods=='是' && multiSelect))">
					<view class="l  ">
						<view class="name flex-row">{{item.goods_name}}
							<view class="goods-type  ">{{item.sale_state||'下架'}}</view>
						</view>
						<view class="flex-row">
							<view class="qty" style="min-width: 180rpx;">库存：{{isStockSetting?item.stock_num:item.goods_stock}}</view>
							<view class="qty"> ￥{{item.sale_price}}</view>
						</view>
					</view>
					<image v-if="!multiSelect" src="../../static/arrow_black.png"></image>
					<image v-else :src="selectedGoodsNo.indexOf(item.id)!=-1?'/static/check.png':'/static/uncheck.png'">
					</image>
				</view>
			</scroll-view>
		</view>



		<view class="bottom-container flex-row-center" v-if="!multiSelect">
			<view class="item" @click="settingMultiple(0)">批量打印</view>
			<view class="item" @click="settingMultiple(1)">批量上架</view>
			<view class="item" @click="settingMultiple(2)">批量下架</view>
		</view>
		<view v-else-if="!is_search" class="bottom-container flex-row-center">
			<view class="text">共{{selectedGoodsNo.length}}种商品</view>
			<view class="btn" @click="multipleConfirm">确定选择</view>
		</view>



		<!-- <image class="qrcode-img" src="/static/manage/qrcode2.png" mode="aspectFill" @click="qrcodeClick"></image> -->
	<drag-button :isDock="true" :existTabBar="true" @btnClick="qrcodeClick" @btnTouchstart="btnTouchstart"
			@btnTouchend="btnTouchend" />
		<alert :show="dialogShow" :message="dialogMessage" @leftAction="dialogShow=false" @rightAction="dialogConfirm">
		</alert>
	</view>
</template>

<script>
	import dsBridge from 'dsbridge'
	export default {
		data() {
			return {
				multiSelect: false, //开启多选
				menuType: 0, // 批量 0打印 1 上架 2下架 4 批量选择
				dialogShow: false,
				dialogMessage: "是否确定上架所选商品？",
				searchStr: '',
				classSelectData: {
					no: null,
					title: "全部"
				},
				classSelectIndex: 0,
				classifycations: [],
				selectedGoodsNo: [], //选中的商品编号
				goods: [],
				allGoods: [],
				selectMode: false,
				outStockSelect:false,//出库选择
				goodsTypeIndex: 0,
				goodsTypes: ["全部", "上架", "下架", "售罄"],
				isStockSetting: false, //是否是从库存预警设置点击进入
				lossReprotingSelect:false, // 报损选择
				is_search:false,
			}
		},
		onLoad(options) {
			this.isStockSetting = options.isStockSetting ?? false
			this.outStockSelect = options.outStockSelect ?? false
			this.lossReprotingSelect = options.lossReprotingSelect ?? false
			this.selectMode=options.selectMode??false
			if (options.selectMode)
				this.settingMultiple(4)
			this.getClassifycations();
		},
		onShow() {
			this.is_search=false;
			if (uni.getStorageSync("addGoodsSuccess")) {
				this.getClassifycations();
				uni.setStorageSync("addGoodsSuccess", false)
			}
			if (uni.getStorageSync("refresh")) {
				this.selectedGoodsNo = []
				this.multiSelect = false;
				this.getClassifycations();
				uni.setStorageSync("refresh", null);
			}
		},
		methods: {
      btnTouchstart(e) {
        console.log(e);
      },
      btnTouchend(e) {
        console.log(e);
      },
			filterGoodsType(e) {
				this.goodsTypeIndex = e.detail.value
				this.doSearch()
			},
			qrcodeClick() {
				let ths = this;
				dsBridge.call("QRCode", {}, function(res) {
					if (res) {
						ths.searchStr = "" + res
						ths.selectClassify(ths.classifycations[0])

					}
				})

			},
			getSelectGoods(classifycations) {
				let list = classifycations ?? this.classifycations;
				let resultList = [];
				for (var i in list) {
					if (list[i].check) {
						this.selectedGoodsNo.remove()
						resultList.push(list[i])
					}
					if ((list[i].goods?.length ?? 0) > 0) {
						resultList.push(...this.getSelectGoods(list[i].goods))
					}
				}
				return resultList;
			},
			itemClick(item) {
				if (item && this.multiSelect) {
					this.itemCheck(item);
				} else {
					if(item?.is_temporary_goods=='是')return;
					uni.setStorageSync("goods_edit_data", item) 
					uni.navigateTo({
						url: '/pages/goods/add_goods'
					})
				}
			},
			itemCheck(item) {
				this.is_search=false;
				let index = this.selectedGoodsNo.indexOf(item.id);

				if (index == -1) {
					this.selectedGoodsNo.push(item.id)
				} else {
					this.selectedGoodsNo.splice(index, 1);
				}
				console.log(item, index, this.selectedGoodsNo)
			},
			checkAllClick() {
				
				let b = this.isCheckAll();
				if(b){
					this.selectedGoodsNo.splice(0,this.selectedGoodsNo.length);
				} else {
					this.selectedGoodsNo.splice(0,this.selectedGoodsNo.length);
					for (var i in this.goods) {
						var item = this.goods[i]
						if(([1,2].includes(this.menuType) && item.is_temporary_goods=='是' && !this.multiSelect) || ([0,1,2].includes(this.menuType) && item.is_temporary_goods=='是' && this.multiSelect)){
							continue;
						}
						this.selectedGoodsNo.push(item.id)
					}
				}
			},
			isCheckAll() { //只有全部没有选中才是全选
				let res = true;
				if(this.selectedGoodsNo.length){
					for (var i in this.goods) {
						var item = this.goods[i]
						if(([1,2].includes(this.menuType) && item.is_temporary_goods=='是' && !this.multiSelect) || ([0,1,2].includes(this.menuType) && item.is_temporary_goods=='是' && this.multiSelect)){
							continue;
						}
						if (!this.selectedGoodsNo.includes(item.id)) {
							res= false;
						}
					}
				} else {
					res= false;
				}
				return res;
			},
			settingMultiple(type) { //0 打印，1 上架，2下架
				this.multiSelect = true;
				this.menuType = type;

			},
			multipleConfirm() {
				if (this.selectedGoodsNo.length == 0) {
					uni.showToast({
						title: "请选中商品",
						icon: 'none'
					})
					return;
				}

				if (this.menuType == 4) { //批量选择

					var list = [];
						for (let i in this.allGoods) {
							let item = this.allGoods[i];
						if (this.selectedGoodsNo.indexOf(item.id) != -1) {
								list.push(item)
							}
						}

					uni.setStorageSync("multipleSelectList", list)
					uni.navigateBack()
				} else if (this.menuType == 0) {

					var list = [];
					var list2 = [];
					for (let i in this.allGoods) {
						let item = this.allGoods[i];
						if (this.selectedGoodsNo.indexOf(item.id) != -1) {
							list.push(item.goods_no)
							list2.push(item);
						}
					}
					uni.setStorageSync("print_goods_no_list", list)
					uni.setStorageSync("print_goods_list", list2)
					uni.navigateTo({
						url: '/pages/goods/goods_print'
					})
				} else if (this.menuType == 1) {
					this.dialogShow = true;
					this.dialogMessage = '是否确定上架所选商品？';
				} else {
					this.dialogShow = true;
					this.dialogMessage = '是否确定下架所选商品？';
				}
			},
			dialogConfirm() {
				let saleState = this.menuType == 1 ? "上架" : "下架"
				var paramsList = [];
				for (let i in this.selectedGoodsNo) {
					paramsList.push({
						"serviceName": "srvretail_goods_info_update",
						"condition": [{
							"colName": "id",
							"ruleType": "eq",
							"value": this.selectedGoodsNo[i]
						}],
						"data": [{
							"sale_state": saleState
						}]
					})
				}
				this.dialogShow = false
				this.selectedGoodsNo = [];
				this.multiSelect = false;
				uni.showLoading({
					title: "加载中..."
				})
				this.$apiPost("/retail/operate/srvretail_goods_info_update", paramsList).then(res => {
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						uni.showToast({
							title: "成功！",
							icon: 'none'
						})
					}
					this.getClassifycations();

				})
			},
			sangjia() {
				this.dialogShow = true;
			},
			selectClassify(item) {
				this.classSelectData = item;
				this.goods = item.goods;
				item.expand = !(item.expand ?? false)
				this.doSearch()
			},
			getClassifycations() {
				this.$apiPost("/retail/select/srvretail_goods_classify_select", {
					serviceName: "srvretail_goods_classify_select",
					"colNames": ["*"]
				}).then(res => {
					let list = [{
						classify_name: "全部",
						children: []
					}];
					for (let i in res.data) {
						let item = res.data[i];
						if (item.parent_no == null) { //顶级菜单
							let children = this.getCcChildren(res.data, item.no);
							item.children = children;
							list.push(item)
						}
					}

					this.classifycations = list;
					this.classSelectData = list[0];
					this.doSearch()
				})
			},
			getCcChildren(classifycations, parent_no) {
				var list = [];
				for (var i in classifycations) {
					if (classifycations[i].parent_no == parent_no) {
						list.push(classifycations[i])
					}
				}
				return list;
			},
			doSearch() {
				let cond = this.classSelectData?.no == undefined ? [] : [{
					"colName": "classify_path",
					"ruleType": "like",
					"value": "/" + this.classSelectData.no + "/"
				}];
				if (this.goodsTypeIndex != 0) {
					// if (this.goodsTypeIndex == 3) {
					if (false) {
						cond.push({
							"colName": "goods_stock",
							"ruleType": "le",
							"value": 0
						})
					} else
						cond.push({
							"colName": "sale_state",
							"ruleType": "like",
							"value": this.goodsTypes[this.goodsTypeIndex]
						})
				}
				if(this.outStockSelect || this.lossReprotingSelect){
					cond.push({
						"colName": "goods_stock",
						"ruleType": "gt",
						"value": 0
					})
				}
				let action = this.selectMode ?'srvretail_goods_info_check_select':'srvretail_goods_info_select';
				if (this.isStockSetting)
					action = "srvretail_store_stock_select"
				this.$apiPost("/retail/select/" + action, {
					serviceName: action,
					condition: cond,
					page: {
						"pageNo": 1,
						"rownumber": 500
					},
					"colNames": ["*"]
				}).then(res => {
					if (this.classSelectData?.no == undefined && this.searchStr.length == 0) {
						this.allGoods = res.data
					}
					if (this.searchStr.length > 0) {
						let list = [];
						for (let i in res.data) {
							if ((res.data[i].goods_name??"").indexOf(this.searchStr) != -1) {
								list.push(res.data[i]);
							} else if ((res.data[i].goods_barcode??"").indexOf(this.searchStr) != -1) {
								list.push(res.data[i]);
							} else if (res.data[i].mnemonic_code&& res.data[i].mnemonic_code.indexOf(this.searchStr) != -1) {
								list.push(res.data[i]);
							}
						}
						this.goods = list;
					} else
						this.goods = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 39rpx;

		}

		input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 8rpx;
			color: #000;
		}
	}

	.qrcode-img {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 268rpx;
		right: 24rpx;
	}



	.body {
		flex: 1;
		height: 1rpx;
		background-color: white;
		overflow: hidden;

		.left-container {
			width: 220rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.check-item {
				width: 100%;
				height: 80rpx;
				background: #FFFFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				view {
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(56, 192, 158, 1);
				}
			}

			.uncheck-item {
				width: 100%;
				height: 80rpx;
				background: #F5F5F7FF;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				view {
					font-size: 30rpx;
					font-weight: 500;
					color: #000;
				}
			}

			.check-item-child {
				width: 100%;
				height: 80rpx;
				background: #FFFFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				view {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(56, 192, 158, 1);
				}
			}

			.uncheck-item-child {
				width: 100%;
				height: 80rpx;
				background: #FFFFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				view {
					font-size: 28rpx;
					font-weight: 500;
					color: #000;
				}
			}
		}

		.right-container {
			flex: 1;
			border-left: 2rpx solid #F5F5F7FF;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(102, 102, 102, 1);
				height: 72rpx;
				line-height: 72rpx;
				border-bottom: 2rpx solid #F5F5F7FF;
				padding-left: 22rpx;
				flex: 1;
			}

			.checkAll {
				font-size: 32rpx;
				padding-right: 34rpx;
				font-weight: 500;
				color: rgba(212, 48, 48, 1);
			}

			.item {
				padding: 20rpx 34rpx 22rpx 22rpx;
				border-bottom: 2rpx solid #F5F5F7FF;

				.l {
					flex: 1;

					.name {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						margin-bottom: 8rpx;
						flex: 1;

						.goods-type {
							min-width: 65rpx;
							height: 24rpx;
							line-height: 24rpx;
							padding: 0 6rpx;
							border-radius: 8rpx 0 8rpx 0;
							border: 1rpx solid rgba(212, 48, 48, 1);
							margin-top: -12rpx;
							font-size: 20rpx;
							font-weight: 500;
						}
					}

					.qty {
						color: rgba(102, 102, 102, 1);
						font-size: 24rpx;
						font-weight: 500;
					}


				}

				image {
					width: 32rpx;
					height: 32rpx;

				}

			}
		}
	}

	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;

		.item {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>
